<template>
  <page-wrap back hideTab :title="title" stay-still>
    <view class="annex">
      <view class="annex-info">
        <u-image width="88rpx" height="88rpx" :src="fileImg" class="annex-img"></u-image>
        <view class="annex-name u-m-b-40">{{fileName}}</view>
        <view class="btn btn-preview" @click="preview">预览</view>
      </view>
      <view class="fixed-bottom">
        <view class="btn btn-primary" @click="share">分享</view>
      </view>
    </view>
  </page-wrap>
</template>

<script>
export default {
  data() {
    return {
      title: '',
      fileImg: this.$imgBase + 'resume/annex.png',
      filePath: '',
      fileName: '',
      fileType: '',
      tempFilePath: '',
    }
  },
  onLoad(opt) {
    this.title = opt.title || '文件详情';
    opt.path && (this.filePath = decodeURIComponent(opt.path));
    if(opt.path) {
      this.filePath = decodeURIComponent(opt.path)
      this.filePath = this.filePath.replace('http:', 'https:');
      this.fileType = this.filePath.substring(this.filePath.lastIndexOf('.'));
    }
    this.fileName = opt.name || '附件简历' + this.fileType;
    if(this.fileName.indexOf('.') < 0) {
      this.fileName += this.fileType;
    }
  },
  methods: {
    downloadFile() {
      if(!this.filePath) {
        uni.showToast({
          title: '附件地址错误',
          icon: 'none',
        });
        return reject();
      }
      return new Promise((resolve, reject) => {
        if(this.tempFilePath) {
          resolve();
          return
        }
        const that = this;
        uni.showLoading();
        let localFilePath = '';
        // #ifdef MP-WEIXIN
          localFilePath = wx.env.USER_DATA_PATH + '/' + this.fileName;
        // #endif

        uni.downloadFile({
          url: this.filePath,
          filePath: localFilePath,
          success: function (res) {
            console.log(res)
            that.tempFilePath = res.tempFilePath || res.filePath;
            resolve(res);
          },
          fail: function (err) {
            reject(err);
          },
          complete: function (res) {
            uni.showToast({
              title: res,
              icon: 'none',
            })
            uni.hideLoading();
          }
        });
      })
      
    },
    preview() {
      this.downloadFile().then(() => {
        uni.openDocument({
          filePath: this.tempFilePath,
          showMenu: true,
          success: function () {
            console.log('打开文档成功');
          },
          fail: function (err) {
            console.error(err);
            if(err.errMsg == 'openDocument:fail filetype not supported') {
              uni.showToast({
                title: '不支持的文档类型',
                icon: 'none',
              });
            } else {
              uni.showToast({
                title: '文档预览失败',
                icon: 'none',
              });
            }
            
          },
        });
      });
    },
    share() {
      this.downloadFile().then(res => {
        // 下载完成后转发
        uni.shareFileMessage({
          filePath: this.tempFilePath,
          fileName: this.fileName,
          success() {},
          fail: console.error,
        })
      })

    },
  },
}
</script>

<style lang="scss" scoped>
.annex {
  &-info {
    padding-top: 25vh;
    text-align: center;
  }
  &-img {
    margin-bottom: 40rpx;
    display: inline-block;
  }

  .btn-preview {
    width: 200rpx;
    color: #FFF;
    background: $bg-linear-gradient-button;
  }
}
.fixed-bottom {
  position: fixed;
  bottom: constant(safe-area-inset-bottom);
  bottom: env(safe-area-inset-bottom);
  width: 100%;
  background-color: $uni-bg-color-grey;
  padding: 24rpx 32rpx;
  z-index: 2;
}
</style>